<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格操作</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        table{
            width: 900px;
            margin: 50px auto;
            table-layout: fixed;
            border-collapse: collapse;
            border-spacing: 0;
        }
        table td{
            text-align: center;
            border: 1px solid #000;
        }
        thead{
            background: #ccc;
        }
        tbody td{
            height: 60px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <td>
                <input type="checkbox" class="checkAll">
            </td>
            <td>#</td>
            <td>姓名</td>
            <td>昵称</td>
            <td>年龄</td>
            <td>性别</td>
            <td>爱好</td>
            <td>操作</td>
        </thead>
        <tbody>
            <!-- <tr>
                <td>
                    <input type="checkbox" class='radio'>
                </td>
                <td>1</td>
                <td>刘备</td>
                <td>小刘</td>
                <td>29</td>
                <td>男</td>
                <td>撩妹、装备、编草鞋</td>
                <td><button>x</button></td>
            </tr> -->
        </tbody>
    </table>
    
    <script>
        let data = [
            {
                "name": "刘备",
                "nickname": "小刘",
                "age": 58,
                "gender": "男",
                "hobby": ["撩妹", "装逼", "编草鞋"]
            },
            {
                "name": "关羽",
                "nickname": "关二",
                "age": 47,
                "gender": "男",
                "hobby": ["耍大刀", "变脸", "喝酒"]
            },
            {
                "name": "张飞",
                "nickname": "张三",
                "age": 45,
                "gender": "男",
                "hobby": ["打架", "喝酒", "耍流氓"]
            },
            {
                "name": "赵云",
                "nickname": "赵四",
                "age": 22,
                "gender": "男",
                "hobby": ["打架", "喝酒", "耍帅"]
            },
            {
                "name": "貂蝉",
                "nickname": "美女",
                "age": 20,
                "gender": "女",
                "hobby": ["撩汉", "化妆"]
            },
            {
                "name": "小乔",
                "nickname": "乔二",
                "age": 18,
                "gender": "女",
                "hobby": ["弹琴", "唱歌", "撩周瑜"]
            }
        ]

        let tbody = document.querySelector('tbody');
        
        // 1.初始化
        render();
        
        document.onclick = e =>{            // 事件委托
            // 3.单选
            if(e.target.className === 'radio'){
                // 通过事件源类名获取单选框和所在行的tr
                let $checkbox = e.target;
                let $tr = $checkbox.parentNode.parentNode;
                // 非勾时，不高亮背景，且只要有一个单选框非勾，则取消全选框
                if(!($checkbox.checked)){
                    $tr.style.background = '#fff';
                    checkAll.checked = false;
                }else{
                    // 选中时高亮背景
                    $tr.style.background = 'pink';
                }
            }

            // 4. 删除数据
            if(e.target.className === 'del'){
                // 通过事件源获取删除按钮、所在行、ID
                let $delBtn = e.target;
                let $tr = $delBtn.parentNode.parentNode;
                let $id = $tr.id

                let tip = confirm('是否删除数据');
                if(tip){
                    // 获取id，删除数组数据，重新渲染
                    data.splice($id,1);
                    render();
                }
            }
        }

        // 单选、全选
        let checkAll = document.querySelector('.checkAll'); // 全选按钮
        let checks = document.querySelectorAll('.radio'); // 所有单选按钮
        
        // 2.全选控制
        checkAll.onclick = () =>{
            // 选中全选框时，遍历所有所有单选框并把选中属性checked设置为true，反之设置为false
            if(checkAll.checked){
                checks.forEach(item=>{
                    item.checked = true;
                    item.parentNode.parentNode.style.background = 'pink';
                })
            }else{
                checks.forEach(item=>{
                    item.checked = false;
                    item.parentNode.parentNode.style.background = '#fff';
                })
            }
        }
        
        // 渲染数据封装
        function render(){
            // map映射以数组形式返回return结果，join方法转为字符串后作为tbody的内容
            tbody.innerHTML = data.map(({name,nickname,age,gender,hobby},index)=>{
                return `
                    <tr id=${index}>
                        <td>
                            <input type="checkbox" class='radio'>
                        </td>
                        <td>${index+1}</td>
                        <td>${name}</td>
                        <td>${nickname}</td>
                        <td>${age}</td>
                        <td>${gender}</td>
                        <td>${hobby}</td>
                        <td><button class='del'>x</button></td>
                    </tr>
                `
            }).join('');
        }
        
        /* 
        
            存在问题
                * 删除任意数据后，无法重新点击全选
        
        */
        
    </script>
</body>
</html>